<script setup lang="ts">
import { saveRepair } from '@/api/repair';
import { Repair } from '@/api/repair/type';
import Header from '@/components/Header.vue';
import { ref } from 'vue';
const content = ref('');
const grade = ref('');
const classData = ref('');
const device = ref('');

const onSubmit = () => {
    saveRepair({
        content: content.value
    } as Repair);
}
</script>

<template>
    <div class="container">
        <Header name="报障"></Header>
        <div class="content">
            <van-cell-group inset>
                <van-field v-model="grade" label="年级" placeholder="请输入年级" />
                <van-field v-model="classData" label="班级" placeholder="请输入班级" />
                <van-field v-model="device" label="设备" placeholder="请输入设备" />
                <van-field v-model="content" placeholder="请输入故障内容" 
                    :maxlength="255" show-word-limit rows="5" autosize type="textarea"
                />
            </van-cell-group>
            <div class="group">
                <van-button style="width: 100%;" type="primary" @click="onSubmit">提交</van-button>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    .content {
        margin: 3%;
        width: 94;
        .group {
            display: flex;
            width: 94%;
            margin: 3%;
        }
    }
}
</style>